<template>
	<view class="order">
		<view style="padding-bottom: 100px;">
		<uni-card isShadow>
			<view v-if="order.pay_status == 0">
				<h2 class="mainColor">订单已取消</h2>
				<h4 class="grayColor">超时未支付</h4>
			</view>
			<view v-else-if="order.pay_status == 1">
				<h2 class="mainColor">订单进行中</h2>
				<h4 class="grayColor">咨询中</h4>
			</view>
			<view v-else-if="order.pay_status == 2">
				<view class="mainColor flex">
					<h2 style="margin-right: 10px;">待支付</h2>
					<u-count-down :time="15 * 60 * 1000" 
					format="mm:ss"
					@change="onChange">
						 <view class="uni-flex time">
								<view class="time__custom">
									<h2 class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</h2>
								</view>
								<h2 class="time__doc">:</h2>
								<view class="time__custom">
									<h2 class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</h2>
								</view>
							</view>
					</u-count-down>
				</view>
				<h4 class="grayColor">未支付</h4>
			</view>
			<view v-else-if="order.pay_status == 3">
				<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
					<h2 class="mainColor">订单已完成</h2>
					<view class="text mainColor">对此订单不满?</view>
				</view>
				<h4 class="grayColor">咨询已结束</h4>
			</view>
			<h3>订单类型:{{order.price_type_title}}({{order.price}})元</h3>
		</uni-card>
	  <uni-card isShadow>
	  		 <h3>咨询医生</h3>
	  		<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;background-color: #f3f4f8;padding: 10px;border-radius: 8px;">
	  			<view class="text "  @click="toDoctor">
	  				<view class="uni-flex uni-row">
	  					<view class="text">
	  						<image class="uni-media-list-logo" :src="order.doctor.face_image"></image>
	  					</view>
	  					<view class="text">
	  						<view>
	  							<span class="doctor">{{order.doctor.realname}}</span>
								<span class="professional">{{order.doctor.title.title}}</span>
	  							<!-- <span v-for="(itemChild, indexChild) in doctor.professional"
	  							:key="indexChild" class="professional">{{itemChild}}</span> -->
	  						</view>
	  						<view>
	  							<span>{{order.doctor.hospital.title}}</span>
	  							<span class="hospital" v-for="(item,index) in order.doctor.sections" :key="index">
								{{item}}
								</span>
	  						</view>
	  					</view>
	  				</view>
	  			</view>
	  			<view class="text"  style="padding-top: 15px;">
	  				<uni-icons type="forward" color="#999" size="16" />
	  			</view>
	  		</view>
	  </uni-card>
	  <uni-card isShadow>
	  		 <h3>咨询内容</h3>
			 <view style="background-color: #f3f4f8;padding: 10px;border-radius: 8px;">
				<view class="patient">
					 <h3>患者信息</h3>
					  <view>
					  <span>{{order.patient_text}}</span>
					  <!-- <span>{{order.patient_text}}</span>
					  <span>{{order.patient_text}}{{order.patient_text}}</span></view> --></view>
				</view>
				<view class="describe">
					<h3>患者病情描述</h3>
					<view>{{order.disease_msg}}</view>
				</view>
			</view>
	  </uni-card>
	  <uni-card isShadow>
	  		<h3>订单信息</h3>
	  		<view class="uni-flex uni-row orderlist" style="-webkit-justify-content: space-between;justify-content: space-between;">
	  			<view class="text">订单金额</view>
	  			<view class="text">{{order.pay_price}}</view>
	  		</view>
			<view class="uni-flex uni-row orderlist" style="-webkit-justify-content: space-between;justify-content: space-between;">
				<view class="text">实付金额</view>
				<view class="text">{{order.pay_price}}</view>
			</view>
			<view class="uni-flex uni-row orderlist" style="-webkit-justify-content: space-between;justify-content: space-between;">
				<view class="text">订单编号</view>
				<view class="text">{{order.order_sn}}</view>
			</view>
			<view class="uni-flex uni-row orderlist" style="-webkit-justify-content: space-between;justify-content: space-between;">
				<view class="text">下单时间</view>
				<view class="text">{{order.created_at}}</view>
			</view>
	  </uni-card>
	</view>
	<view class="onebtn" v-if="order.pay_status == 0">
		<button @click="toUrl('singleRoom')">再次咨询</button>
	</view>
	<view class="onebtn " v-if="order.pay_status == 1">
		<button @click="toUrl('singleRoom')">咨询医生</button>
	</view>
	<view class="twobtn uni-flex uni-row " v-if="order.pay_status == 2">
		<button>取消咨询</button>
		<button>去支付</button>
	</view>
	<view class="uni-flex uni-row twobtn"  v-if="order.pay_status == 3">
		<button>评价</button>
		<button @click="toUrl('singleRoom')">再次咨询</button>
	</view>
  </view>
</template>

<script>
	import provinceData from '@/utils/province';
	import cityData from '@/utils/city';
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import userList from '@/commen/tim/user.js';
	import expertUrl from '@/api/expertConsulation'
	export default {
		components: {
			uniTag,uniIcons
		},
	  data() {
		return {
			order:{},
			timeData: {},user_id:null,TIM:null, 
		}
	  },
	 computed:{
	  orderInfo(){
		return this.$store.state.orderInfo 
	  }
	 },
	  onLoad(option) {
		this.TIM = this.$TIM
		this.initData()
	  },
	  methods: {
		  toDoctor(){
			  uni.showToast({
				title: "医生详情页功能开发中，请期待！",
				icon: 'none'
			  })
		  },
		async initData(){
			const {data} = await this.$axios({
			  url: expertUrl.consultation_order_detail + "?order_sn=" + this.orderInfo.order_sn
			})
			this.order = data.order
		},
		onChange(e) {
			this.timeData = e
		},
		toUrl(url){
			uni.navigateTo({
				url: 'toOrder'
			});
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.order{
		.mainColor{
			color: #41AB85;
		}
		.grayColor{
			color: #808080;margin: 10px 0;
		}
		.doctor{
			font-size: 20px;font-weight: bold;margin-right: 10px;
		}
		.professional{
			color: gray;
		}
		.hospital{
			margin-left: 10px;
		}
		.patient{
			margin: 5px 0 10px 0;
		}
		.orderlist{
			margin: 10px 0;
		}
		.u-count-down__text{
			color: #41AB85 !important;
		}
		.onebtn{
			background-color: #fff;
			position: fixed;bottom: 0;width: 100%;
			height: 80px;
			left: 0;z-index: 99;
			button{
				margin: 20px 10px;
				background-color: #41AB85;color: #fff;border-radius: 20px;
			}
		}
		.twobtn{
			background-color: #fff;
			position: fixed;bottom: 0;width: 100%;
			height: 80px;
			left: 0;z-index: 99;
			button{
				margin: 20px 10px;
				background-color: #41AB85;color: #fff;border-radius: 20px;width: 40%;
			}
			button:first-child{
				background-color: #fff;color: #41AB85;border:none
			}
			button:first-child:after{
				border:none
			}
		}
	}
</style>